<template>
  <div class="container">
    <!-- 主体结构 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <!-- 左边 -->
        <div class="left">
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"
              >旅游攻略</el-breadcrumb-item
            >
            <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="tittle">
            <h1>{{ article.title }}</h1>
          </div>
          <div class="post_content">
            <div class="post_content_read">
              <!-- 攻略：{{ article.updated_at | formatDate }} &nbsp;&nbsp;阅读：{{ -->
              攻略：{{ time() }} &nbsp;&nbsp;阅读：{{ article.watch }}
            </div>
            <div class="post_content_main">
              <div
                class="post_content_main_article"
                v-html="article.content"
              ></div>
              <!-- {{ article.content  -->
              <div class="post_content_main_icon">
                <div class="edit">
                  <span class="el-icon-edit-outline"></span>
                  <span>评论</span>
                </div>
                <div class="share">
                  <span class="el-icon-share" @click="share()"></span>
                  <span>分享</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 评论发布 -->
          <div ref="commit">
            <CommentPublish
              :data="replyComment"
              @reloadCommentList="getCommentList"
            />
          </div>

          <!-- 评论列表 -->
          <div class="comment_list">
            <CommentItem
              @sendReply="sendReply"
              v-for="(value, index) in commentList"
              :key="index"
              :data="value"
            />
          </div>
          <!-- 分页结构 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
      <el-col :span="8">
        <!-- 右边 -->
        <div class="right">
          <div class="tittle">
            <p>相关攻略</p>
          </div>
          <RelatedItem
            v-for="(item, index) in recommendList"
            :key="index"
            :data="item"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import RelatedItem from "@/components/post/RelatedItem.vue";
import CommentPublish from "@/components/post/CommentPublish.vue";
import CommentItem from "@/components/post/CommentItem.vue";

// 引入时间过滤器
import moment from "moment";

export default {
  component: {
    RelatedItem,
    CommentPublish,
    CommentItem,
  },
  data() {
    return {
      article: [], //文章数据
      commentList: [], //评论列表
      replyComment: null, //回复评论
      pageSize: 5,
      pageIndex: 0,
      total: 0, //文章总数目
      dataList: [], //存放当前页的评论数据
      recommendList: {}, //相关推荐数据
    };
  },
  watch: {
    $route() {
      this.getArticle();
      this.getRecommend();
    },
  },
  mounted() {
    this.getArticle();
    this.getRecommend();
    this.getCommentList();
    // console.log(this.commentList)
  },

  methods: {
    //   回复评论
    sendReply(obj) {
      this.$refs.commit.scrollIntoView();
      console.log(obj);
      this.replyComment = obj;
    },
    //   获取评论
    // 获取评论列表
    getCommentList() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id,
          _limit: this.pageSize,
          _start: this.pageSize * (this.pageIndex - 1),
        },
      }).then((res) => {
        // console.log(res)
        this.commentList = res.data.data;
        // console.log(this.commentList)
        this.total = res.data.total;
      });
    },
    // 分享功能
    share() {
      this.$message.warning("该功能正在加速开发中");
    },
    // 处理时间
    time() {
      if (this.article) {
        return moment(this.article.created_at).format("YYYY-MM-DD HH:mm");
      }
    },
    // 获取推荐文章
    getRecommend() {
      this.$axios({
        url: "posts/recommend",
      }).then((res) => {
        // console.log(res)
        this.recommendList = res.data.data;
      });
    },
    //   封装文章数据
    getArticle() {
      let id = this.$route.query.id;
      this.$axios({
        url: `posts/${id}`,
      }).then((res) => {
        // console.log(res)
        this.article = res.data;
      });
    },

    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`)
      this.pageSize = val;
      // console.log(this.pageSize)
      this.getCommentList();
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`)
      this.pageIndex = val;
      console.log(this.pageIndex);
      this.getCommentList();
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  max-width: 1000px;
  margin: 20px auto;
  .left {
    .tittle {
      padding: 15px 0;
      border-bottom: 1px solid #ccc;
    }
    .post_content {
      .post_content_read {
        text-align: right;
        color: #888;
        margin: 15px 0;
      }

      .post_content_main {
        .post_content_main_article {
          /deep/img {
            max-width: 100%;
          }
        }
        .post_content_main_icon {
          margin: 40px 0;
          display: flex;
          justify-content: center;
          align-items: center;
          //   color: orange;
          .edit,
          .share {
            display: flex;
            margin: 0 10px;
            flex-direction: column;
            align-items: center;
            color: #666;
          }
          .el-icon-edit-outline,
          .el-icon-share {
            font-size: 40px;
            color: orange;
          }
        }
      }
    }

    .comment_list {
      // max-width: 700px;
      border: 1px solid #ccc;
      margin: 20px 0;
      padding: 20px 0;
    }
  }
  .right {
    // background: red;
    .tittle {
      font-size: 18px;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>